<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    let obj = {name: 'jack', age: 21, hobbies: ['study', ['basketball', 'reading']]}

    function reactive(target) {
        return new Proxy(target, {})
    }

    let handler = {
        get(target, key) {
            // 收集effect
            let temp = target[key]
            if (typeof temp === 'object') {
                return new Proxy(target[key], handler)
            }
            return temp
        },
        set(target, key, newValue) {
            // 触发effect的更新
            target[key] = newValue
            console.log(key)
        }
    }

    const proxy = reactive(obj)

    proxy.name = "marry"
    proxy.msg = "success"   // 即使是不存在的属性也可以劫持

    console.log(obj)
</script>
</body>
</html>
